<template>
  <el-select
    v-model="value"
    pxlaceholder="请选择调查评价点"
    clearable
    :teleported="false"
    v-select-infinite="loadMore"
    filterable reserve-keyword
    :filter-method="filterMethod"
  >
    <el-option
      v-for="(item, index) in selectList.slice(startIndex(), rangeNum)"
      :label="item.label"
      :value="item.value"
      :key="index"
    />
  </el-select>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getSelectAPI } from "./api";

const selectList = ref<any[]>([]);
const value = ref("");
const paginationInfo = ref<any>({ pageSize: 20, pageNo: 1, totalPages:0,   total:0  });
const queryLabel = ref("");
onMounted(() => {
  getSelect();
});
const getSelect = () => {
  getSelectAPI({
    pageSize: paginationInfo.value.pageSize,
    pageNo: paginationInfo.value.pageNo,
    label:queryLabel.value,
  }).then((res:any) => {
    console.log(res)
    selectList.value = res.data;
    paginationInfo.value.total = res.total;
    paginationInfo.value.totalPages =  Math.ceil(res.total / paginationInfo.value.pageSize)
    console.log( paginationInfo.value)
  });
};
const filterMethod = (query: string) => {
  console.log('query',query ,value.value)
  queryLabel.value = query;
  paginationInfo.value.pageNo = 1
  getSelect()
}
const maxItem = ref(10);
const rangeNum = ref(10);
const loadMore = (key: any) => {
  if(key =='add'){
    paginationInfo.value.pageNo++
    rangeNum.value +=1
    getSelect();
  }else if (key === 'subtract') {
    if(paginationInfo.value.pageNo ==1) return;
    paginationInfo.value.pageNo--
    rangeNum.value --;
    getSelect();
  }
};

const startIndex = () => {
  if (selectList.value.length > maxItem.value) {
    if (rangeNum.value >= selectList.value.length) {
      return selectList.value.length - maxItem.value;
    } else {
      return rangeNum.value - maxItem.value;
    }
  }
  return 0;
};
</script>

<style lang="scss" scoped>
</style>